<script setup lang="ts">
import { ref, defineProps, computed } from 'vue'

const title2 = ref('子组件title')
const props = defineProps<{ title: string }>()

const titleComputed = computed(() => {
  return `${props.title} ---- Default`
})
const titleComputedHeader = computed(() => {
  return `${props.title} ---- Header`
})
const titleComputedFooter = computed(() => {
  return `${props.title} ---- Footer`
})
</script>
<template>
  <div>
    <div style="color: red">
      <slot :title="titleComputed"></slot>
    </div>
    <div style="color: green">
      <slot name="header" :title="titleComputedHeader"></slot>
    </div>
    <div style="color: blue">
      <slot name="footer" :title="titleComputedFooter"></slot>
    </div>
  </div>
</template>
